<template>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <van-nav-bar
    title="首頁"
    left-text="返回"
    right-text="消息"
    left-arrow
    class="header"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <div class="grxx">
    <van-image
      round
      width="100"
      height="100"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      class="img"
    />
    <span>
      <p>{{ username }}</p>
      <van-text-ellipsis
        rows="1"
        :content="text"
        expand-text="展开"
        collapse-text="收起"
      />
    </span>
    <button @click="tologin">
      微信已綁定 >
    </button>
  </div>
  <div class="neirong">
    <van-grid>
      <van-grid-item icon="calendar-o" text="日历" @click="toDate" />
      <van-grid-item icon="comment-o" text="学院" @click="toxueyuan" />
      <van-grid-item icon="smile-o" text="表情包" />
      <van-grid-item icon="star-o " text="积分" />
    </van-grid>
    <p>我的宠物<span>全部></span></p>
    <van-row class="add">
      <van-col span="8">
        <van-image
          round
          width="60"
          height="60"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          class="img"
        />
        <span>两个月</span>
      </van-col>
      <van-col span="10" offset="4">
        <van-icon name="add-o" class="jia" @click="toKind" />
        <span>
          添加宠物<br>
          记录萌宠生活
        </span>
      </van-col>
    </van-row>
    <div class="van-haptics-feedback">
      <transition name="van-fade">
        <div v-show="visible">
          <!-- <van-icon name="friends-o" /> -->
          <van-cell
            icon="friends-o"
            title="邀请好友"
            is-link
            @click="showPopup1"
          />
          <van-popup v-model:show="show" :style="{ padding: '64px' }">
            <div class="h2">
              <img src="../../assets/h2.jpg" alt="">
            </div>
          </van-popup>
        </div>
      </transition>
    </div>
    <div class="van-haptics-feedback">
      <transition name="van-fade">
        <div v-show="visible">
          <!-- <van-icon name="envelop-o" /> -->
          <van-cell
            icon="envelop-o"
            title="意见反馈"
            is-link
            @click="showPopup2"
          />
          <van-popup v-model:show="show1" :style="{ padding: '64px' }">
            反馈意见
          </van-popup>
        </div>
      </transition>
    </div>
    <div class="van-haptics-feedback">
      <transition name="van-fade">
        <div v-show="visible">
          <!-- <van-icon name="user-o" /> -->
          <van-cell
            icon="user-o"
            title="关于我们"
            is-link
            @click="showPopup3"
          />
          <van-popup v-model:show="show2" :style="{ padding: '64px' }">
            关于我们
          </van-popup>
        </div>
      </transition>
    </div>
  </div>
  <!-- <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar> -->
</template>

<script setup lang="ts">
import { showFailToast } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const onClickLeft = () => window.history.back()
const onClickRight = () => showFailToast('不急這裏還沒做')
const text = 'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。'
const username = 'ewrueru'
const active = ref(0)
const visible = true
const route = useRouter()
const toDate = () => {
  route.push('/date')
}
const toKind = () => {
  route.push('/kind')
}
const toxueyuan = () => {
  route.push('/school')
}
const tologin = () => {
  route.push('/login')
}
const show = ref(false)
const show1 = ref(false)
const show2 = ref(false)
const showPopup1 = () => {
  show.value = true
}
const showPopup2 = () => {
  show1.value = true
}
const showPopup3 = () => {
  show2.value = true
}
</script>

<style scoped>
.grxx {
  background-color: #f5cb29;
}
.grxx span {
  display: block;
  float: left;
  overflow: auto;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  width: 100px;
  height: 80px;
  font-size: 12px;
}
.img {
  display: block;
  float: left;
  margin-left: 20px;
}
.header {
  background: #f5cb29;
}
button {
  margin-top: 36px;
  margin-bottom: 50px;
  width: 90px;
  height: 28px;
  font-size: 12px;
  border: 0;
  border-radius: 25px;
  background-color: #ffffff;
}
.neirong {
  padding-top: 20px;
  height: 640px;
  background: rgb(234 234 234);
}
.neirong p {
  display: flex;
  justify-content: space-between;
  text-align: left;
}
.neirong p span {
  font-size: 12px;
  color: #bbbbbb;
}
.neirong .add {
  padding-top: 20px;
  height: 80px;
  font-size: 12px;
  background: #ffffff;
  line-height: 60px;
}
.neirong .add .jia {
  float: left;
  font-size: 40px;
}
.neirong .add span {
  display: block;
  float: left;
  margin-left: 6px;
  height: 50px;
  line-height: 20px;
}
.van-haptics-feedback {
  margin-top: 15px;
  padding-left: 40px;
  height: 50px;
  font-size: 14px;
  background: #ffffff;
  line-height: 50px;
}
.h2 {
  width: 200px;
  height: 200px;
}
.h2 img {
  width: 100%;
  height: 100%;
}
</style>
